<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form inline query label-width="70px" :model="queryParams" :formItem="queryFormItem" :searchFn="() => refTable.reload()" />
		</div>

		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10" v-hasPermi="['system:operlog:remove', 'system:operlog:export']">
				<my-button-export :load="Export" :disabled="!state.list.length" v-hasPermi="['system:operlog:export']" />
				<el-button
					type="danger"
					:disabled="!tableSelection.length"
					@click.prevent="deleteFn(tableSelection)"
					icon="Delete"
					v-hasPermi="['system:operlog:remove']"
				>
					删除
				</el-button>
			</div>
			<my-list-panel ref="refTable" :loadFn="loadData" :total="state.total">
				<template #default="{ page, size }">
					<my-table :data="state.list" :columns="state.columns" @selection-change="(val) => (tableSelection = val)">
						<template #index="{ $index }">
							{{ $index + 1 + (page - 1) * size }}
						</template>
						<template #status="{ row }">
							{{ selectDictLabel($store.dict.GETsysOperStatus, row.status) }}
						</template>
						<template #businessType="{ row }">
							{{ selectDictLabel($store.dict.sysOperType, row.businessType) }}
						</template>
						<template #default="{ row }">
							<my-button-text @click.prevent="detailFn(row)">详情</my-button-text>
						</template>
					</my-table>
				</template>
			</my-list-panel>
		</div>

		<!-- 操作日志详情 -->
		<el-dialog title="操作日志详情" v-model="dialog.open" width="740px" append-to-body>
			<el-form :model="dialog.form" label-width="90px" class="validate--bottom">
				<el-row>
					<el-col :span="12">
						<el-form-item label="操作模块：">
							{{ dialog.form.title }} /
							{{ selectDictLabel($store.dict.sysOperType, dialog.form.businessType) }}
						</el-form-item>
						<el-form-item label="登录信息："> {{ dialog.form.operName }} / {{ dialog.form.operIp }} </el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="请求地址：">{{ dialog.form.operUrl }}</el-form-item>
						<el-form-item label="请求方式：">
							{{ form.requestMethod }}
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="操作方法：">{{ dialog.form.method }}</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="请求参数：">
							<JsonEditor class="w-100%" :modelValue="JSON.parse(dialog.form.operParam)" language="zh-CN"></JsonEditor>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="返回参数：">
							<JsonEditor class="w-100%" :modelValue="JSON.parse(dialog.form.jsonResult)" language="zh-CN"></JsonEditor>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="操作状态：">
							{{ selectDictLabel($store.dict.GETsysOperStatus, row.status) }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="操作时间：">{{ dialog.form.operTime }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="异常信息：" v-if="dialog.form.status === 1">
							{{ dialog.form.errorMsg }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="system/operlog">
import JsonEditor from 'my-json-editor';
import { pageOperlog, removeOperlog, exportOperlog } from '@a/system.js';
import { downloadBlob } from '@u/download';

/*******************************************表格增删改查***********************/
const queryFormItem = [
		{ prop: 'likeTitle', label: '系统模块' },
		{
			itemType: 'select',
			prop: 'businessType',
			label: '类型',
			list: $store.dict.sysOperType
		},
		{ prop: 'likeOperName', label: '操作人员' },
		{
			itemType: 'select',
			prop: 'status',
			label: '状态',
			list: $store.dict.sysCommonStatus
		},
		{
			itemType: 'date',
			prop: 'dateRange',
			label: '操作时间',
			type: 'datetimerange',
			prepend: 'OperTime',
			'range-separator': '至',
			'start-placeholder': '开始日期',
			'end-placeholder': '结束日期'
		}
	],
	{ queryParams, refTable, state, tableSelection, loadData, dialog, detailFn, deleteFn } = pageMixin({
		queryFormItem,
		columns: [
			{
				type: 'selection'
			},
			{
				label: '序号',
				width: '80',
				prop: 'index'
			},
			{
				label: '日志编号',
				prop: 'id'
			},
			{
				label: '系统模块',
				prop: 'title'
			},
			{
				label: '操作类型',
				prop: 'businessType',
				formatter: (row) => selectDictLabel($store.dict.sysOperType, row.businessType)
			},
			{
				label: '请求方式',
				prop: 'requestMethod'
			},
			{
				label: '操作人员',
				prop: 'operName'
			},
			{
				label: '主机',
				prop: 'operIp',
				'show-overflow-tooltip': true
			},
			{
				label: '操作状态',
				prop: 'status',
				formatter: (row) => selectDictLabel($store.dict.sysCommonStatus, row.status)
			},
			{
				label: '操作时间',
				prop: 'operTime'
			},
			{
				label: '操作',
				width: '100'
			}
		],
		api: { page: pageOperlog, remove: removeOperlog }
	});

$store.dict.GETsysOperType();
$store.dict.GETsysOperStatus();

/** 导出按钮操作 */
function Export() {
	return exportOperlog(addDateRange(queryParams, 'dateRange', 'OperTime')).then((data) => {
		downloadBlob(data, '操作日志.xlsx');
	});
}
</script>

<style lang="scss" scoped>
:deep() {
	.jsoneditor-menu,
	.jsoneditor-statusbar,
	.full-screen {
		display: none;
	}
}
</style>
